@import '~@hi-ui/core-css/lib/index.scss';
@import '~perfect-scrollbar/css/perfect-scrollbar';

$prefix: '#{$component-prefix}-scrollbar' !default;

.#{$prefix} {
  --scrollbar-zIndex: 'auto';

  overflow: hidden;
  width: 100%;
  height: 100%;

  &__wrapper {
    width: fit-content;
    height: fit-content;
    min-width: 100%;
    min-height: 100%;
  }

  $thumb-size: 8px;
  $rail-background: use-color('gray', 200);
  $rail-opacity: 0.8;
  $thumb-background: use-color('gray', 400);
  $thumb-active-background: use-color('gray', 500);
  $transition: opacity use-motion-duration('normal') use-motion-bezier('normal'),background-color use-motion-duration('normal') use-motion-bezier('normal');

  &--keep-visible.priority {
    & > .ps__rail-y,
    & > .ps__rail-x {
      opacity: $rail-opacity;
    }

    .ps__thumb-y,
    .ps__thumb-x {
      background-color: $thumb-background;
    }
  }

  &.priority {
    &:hover,
    &:focus {
      & > .ps__rail-y,
      & > .ps__rail-x {
        opacity: $rail-opacity;
      }
    }

    & > .ps__rail-y,
    .ps__thumb-y {
      width: $thumb-size;
      border-radius: $thumb-size*0.5;
      right: 0;
      transition: $transition;
    }

    & > .ps__rail-y:hover,
    & > .ps__rail-y:focus,
    & > .ps__rail-y.ps--clicking {
      width: $thumb-size;
      background-color: $rail-background;
      opacity: $rail-opacity;

      .ps__thumb-y {
        width: $thumb-size;
        right: 0;
        background-color: $thumb-active-background;
      }
    }

    & > .ps__rail-x,
    .ps__thumb-x {
      height: $thumb-size;
      border-radius: $thumb-size*0.5;
      bottom: 0;
      transition: $transition;
    }

    & > .ps__rail-x:hover,
    & > .ps__rail-x:focus,
    & > .ps__rail-x.ps--clicking {
      height: $thumb-size;
      background-color: $rail-background;
      opacity: $rail-opacity;

      .ps__thumb-x {
        height: $thumb-size;
        bottom: 0;
        background-color: $thumb-active-background;
      }
    }
  }

  &--only-scroll-visible.priority {
    &:not(.ps--scrolling-y) > .ps__rail-y:not(:hover):not(:focus),
    &:not(.ps--scrolling-x) > .ps__rail-x:not(:hover):not(:focus) {
      opacity: 0;
    }
  }

  > .ps__rail-y,
  > .ps__rail-x {
    z-index: var(--scrollbar-zIndex);
  }
}
